<template>
  <view class="listWrapper" :style="{
                padding:'0px ' + properties.setStyle.pageMargin+'px'
              }">
    <view  @click="jumpPage" class="list" :style="{
                'border-radius':properties.setStyle.borderRadiusLeftTop+'px' + properties.setStyle.borderRadiusRightTop+'px' + properties.setStyle.borderRadiusRightBottom+'px' +  properties.setStyle.borderRadiusLeftBottom+'px',
                'background-color': properties.setStyle.backgroundColor,
                'min-height':'35px',
                'border-bottom':properties.setStyle.border?'1px solid #999999':'',
                width:'100%'
              }">

      <uv-row style="width: 100%">
        <view class="list">
          <view class="left">
            <view class="icon">
              <uv-image height="30" width="30" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"></uv-image>
            </view>
            <view class="title">
              {{properties.setStyle.shopName}}
            </view>
          </view>

          <view class="right">
            <view class="rightText">
              {{properties.setStyle.copywriting}}
            </view>
            <view class="rightIcon">
              <uv-icon size="13" color="#999999" name="arrow-right"></uv-icon>
            </view>
          </view>
        </view>
      </uv-row>

    </view>

  </view>
</template>
<script>
// 分割线
export default {
  name: "List",
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          "jsonData": {
            "src": 'https://minio.thisforyou.cn:1443/imgfile/video/1482_1727053428(%E5%8E%9F%E8%A7%86%E9%A2%91).mp4',
            "coverUrl": '',
            "autoplay": false,
            "leftIcon": 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
            "rightText": '更多',
            "rightIcon": '', // 右侧箭头
            "pageUrl": '/pages/goods_list/index', // 右侧箭头
            "title": '个人中心', // 右侧箭头
          },
          "setStyle": {
            'borderRadiusLeftTop': 0,
            'borderRadiusRightTop': 0,
            'borderRadiusRightBottom': 0,
            'borderRadiusLeftBottom': 0,
            'border': false,
            'backgroundColor': 'white',
            "pageMargin": 10,
          }
        }
      }
    },

  },
  methods: {
    jumpPage(){
      let page = this.properties.jsonData.pageUrl;
      console.log("page",page)
      uni.navigateTo({
        url:page,
        fail:function (e){
          console.log("e",e)
        }
      })
    }
  },
  created() {
    console.log("properties", this.properties)
  }
}
</script>

<style scoped lang="scss">
.list {
  display: flex;
  width: 100%;
  align-items: center;
  justify-items: center;
  justify-content: space-between;

}
.title{
  padding: 0px 10px;
  color: #3b4144;
}

.right{
  display: flex;
  padding: 5px 10px;
  align-items: center;
  justify-items: center;
  color: #999999;
}
.rightText{
  font-size: 13px;
  padding-right: 10px;
}
.left {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  justify-items: center;
}
</style>
